<template>
    <div>
<!--    上传按钮  -->
      <el-button type="primary" @click="uploadOpen">上传<i class="el-icon-upload el-icon--right"></i></el-button>
<!--    上传页面  -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-upload
          class="upload-demo"
          ref="upload"
          action="/api/cms/template/upload"
          multiple
          :auto-upload="false"
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
          :on-error="handleError"
          :file-list="fileList"
          :data="templateParameters">
          <el-button size="medium" type="primary" >点击选择模板文件</el-button>只能上传Html文件，且不超过10M
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>
        <el-form>
          <el-form-item label="模板名称">
            <el-input v-model="templateParameters.templateName"></el-input>
          </el-form-item>
          <el-form-item label="模板参数">
            <el-input v-model="templateParameters.templateParameter"></el-input>
          </el-form-item>
          <el-form-item label="所属站点">
            <el-select v-model="templateParameters.siteId">
              <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId"/>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitUpload">上传<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-dialog>
<!--   表格插件   -->
      <el-table
        :data="tableData"
        border
        height="700px"
        style="width: 100%">
        <el-table-column
          fixed
          prop="cmsTemplate.siteId"
          label="所属站点"
          width="300">
        </el-table-column>
        <el-table-column
          fixed
          prop="cmsTemplate.templateName"
          label="模板名称"
          width="300">
        </el-table-column>
        <el-table-column
          prop="cmsTemplate.templateParameter"
          label="模板参数"
          width="120">
        </el-table-column>
        <el-table-column
          prop="cmsTemplate.templateId"
          label="模板ID"
          width="250">
        </el-table-column>
        <el-table-column
          prop="cmsTemplate.templateFileId"
          label="模板文件id"
          width="250">
        </el-table-column>
        <el-table-column
          prop="fsFile.fileName"
          label="模板文件名"
          width="300">
        </el-table-column>
        <el-table-column
          prop="fsFile.length"
          label="模板文件大小"
          width="120">
        </el-table-column>
        <el-table-column
          prop="fsFile.md5"
          label="模板MD5"
          width="120">
        </el-table-column>
        <el-table-column
          prop="fsFile.uploadDate"
          label="最后更新时间"
          width="250">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="215">
          <template slot-scope="scope">
            <el-button @click="deleteTemplate(scope.row)" type="text" size="medium">删除</el-button>
            <el-button type="text" @click="exportTemplate(scope.row)" size="medium">导出</el-button>
            <el-button type="text" @click="UpdateTemplate(scope.row)" size="medium">重新导入</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--  分页插件    -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 40, 60]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
        </el-pagination>
      </div>
<!--   更新页面   -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisibleA"
        width="30%"
        :before-close="handleCloseA">
        <el-upload
          class="upload-demo"
          ref="uploadA"
          action="/api/cms/template/update"
          multiple
          :auto-upload="false"
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
          :on-error="handleError"
          :file-list="fileList"
          :data="templateParameters">
          <el-button size="medium" type="primary" >点击选择模板文件</el-button>只能上传Html文件，且不超过10M
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>
        <el-form>
          <el-form-item label="模板名称">
            <el-input v-model="templateParameters.templateName"></el-input>
          </el-form-item>
          <el-form-item label="模板参数">
            <el-input v-model="templateParameters.templateParameter"></el-input>
          </el-form-item>
          <el-form-item label="所属站点">
            <el-select v-model="templateParameters.siteId">
              <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId"/>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitUpdate">上传<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-dialog>
    </div>
</template>

<script>
import * as cmsTemplateApi from '../api/template'
import * as siteApi from '../../site/api/site'
export default {
  data () {
    return {
      // 上传界面是否显示
      dialogVisible: false,
      // 更新界面是否显示
      dialogVisibleA: false,
      // 表格数据
      tableData: [],
      // 当前页
      currentPage: 1,
      // 每页显示大小
      pageSize: 10,
      // 总页数
      pageTotal: 100,
      // 上传文件列表
      fileList: [],
      // 站点列表下拉栏数据
      siteList: '',
      // 上传文件的时候把参数携带走
      templateParameters: {
        // 上传模板时当前选中站点
        siteId: '',
        // 上传模板时的模板名称
        templateName: '',
        // 上传模板时的模板参数
        templateParameter: '',
        // 更新时候携带的模板id
        templateId: ''
      }
    }
  },
  methods: {
    // 删除按钮事件
    deleteTemplate (row) {
      this.$confirm('确认删除?').then(() => {
        cmsTemplateApi.deleteCmsTemplateByTemplateId(row.cmsTemplate.templateId).then(response => {
          if (response.success) {
            this.$message.success('删除成功')
            if (this.tableData.length === 1) {
              this.currentPage = this.currentPage - 1
            }
            this.getTemplateList()
          } else {
            this.$message.error('删除失败,刷新再试试')
          }
        }).catch(_ => {
          this.$message.error('网络链接失败')
        })
      }).catch(_ => {})
    },
    // 导出按钮事件
    exportTemplate (row) {
      window.open('/api/cms/template/down/' + row.cmsTemplate.templateId)
    },
    // 上传页面关闭事件
    handleClose () {
      this.$confirm('确认关闭？')
        .then(_ => {
          // 关闭上传文件组件重置上传的数据
          this.fileList = []
          this.dialogVisible = false
          this.templateParameters = {
            siteId: '',
            templateName: '',
            templateParameter: '',
            templateId: ''
          }
        })
        .catch(_ => {})
    },
    handleCloseA () {
      this.$confirm('确认关闭？')
        .then(_ => {
          // 关闭更新文件组件重置上传的数据
          this.fileList = []
          this.dialogVisibleA = false
          this.templateParameters = {
            siteId: '',
            templateName: '',
            templateParameter: '',
            templateId: ''
          }
        })
        .catch(_ => {})
    },
    // 上传页面事件
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除${file.name}?`)
    },
    // 手动点击上传页面的上传按钮
    submitUpload () {
      if (this.templateParameters.siteId &&
        this.templateParameters.templateName &&
        this.templateParameters.siteId) {
        this.$refs.upload.submit()
      } else {
        this.$message.error('请输入完整信息')
      }
    },
    submitUpdate () {
      if (this.templateParameters.siteId &&
        this.templateParameters.templateName &&
        this.templateParameters.siteId &&
      this.templateParameters.templateId) {
        this.$refs.uploadA.submit()
      } else {
        this.$message.error('请输入完整信息')
      }
    },
    // 上传成功回调
    handleSuccess () {
      this.$message.success('上传成功')
      // 上传成功重置上传文件组件
      this.fileList = []
      this.dialogVisible = false
      this.dialogVisibleA = false
      this.templateParameters = {
        siteId: '',
        templateName: '',
        templateParameter: '',
        templateId: ''
      }
      // 上传成功需要刷新当前页面
      this.getTemplateList()
    },
    // 上传失败回调
    handleError () {
      this.$message.error('上传失败')
    },
    // 上传按钮点击事件
    uploadOpen () {
      this.dialogVisible = true
    },
    UpdateTemplate (row) {
      this.templateParameters.siteId = row.cmsTemplate.siteId
      this.fileList = [{ name: '', url: '' }]
      this.templateParameters.templateId = row.cmsTemplate.templateId
      this.templateParameters.templateName = row.cmsTemplate.templateName
      this.templateParameters.templateParameter = row.cmsTemplate.templateParameter
      this.dialogVisibleA = true
    },
    // 获取当前页面的表单数据
    getTemplateList () {
      cmsTemplateApi.getCmsTemplateListByPagination(this.currentPage, this.pageSize).then(response => {
        console.log(this.siteList)
        this.tableData = response.queryResult.list
        this.pageTotal = response.queryResult.total
        this.tableData.forEach(e => {
          this.siteList.forEach(y => {
            if (e.cmsTemplate.siteId === y.siteId) {
              e.cmsTemplate.siteId = y.siteName
            }
          })
        })
      }).catch(_ => {
        alert('网络错误')
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getTemplateList()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.getTemplateList()
    }
  },
  mounted () {
    siteApi.SiteList().then(response => {
      this.siteList = response.queryResult.list
      this.getTemplateList()
    })
  }
}
</script>

<style scoped>
  .el-upload el-upload--text {
    font-size: 20px;
  }
</style>
